<template>
<div>
  <!-- 楼盘具体信息 -->
 <section>
       <el-table
         :show-header="false"
         :data="tableData"
         :span-method="objectSpanMethod"
         border
         :cell-style="columnStyle"
         style="width: 100%; margin-top: 20px"
       >
         <el-table-column prop="id" label="ID" width="240"></el-table-column>
         <el-table-column width="180" prop="name"></el-table-column>
         <el-table-column prop="amount1"></el-table-column>
         <el-table-column width="180" prop="amount2"></el-table-column>
         <el-table-column prop="amount3"></el-table-column>
         <el-table-column width="180" prop="amount4"></el-table-column>
         <el-table-column prop="amount5"></el-table-column>
       </el-table>
     </section>

<!-- 楼栋信息 -->
         <el-table
      :data="builds"
      style="width: 100%"
      @row-click="showBuilding">
     
            <el-table-column align="center" label="序号"  
            type="index" width="180">

            </el-table-column>
      <el-table-column
        prop="buildingname"
        label="楼栋名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="buildingnumber"
        label="楼栋编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="floor"
        label="楼层"
        width="180">
      </el-table-column>
      <el-table-column
        prop="count"
        label="分户房屋"
        width="180">
      </el-table-column>
      <el-table-column
        prop="totalarea"
        label="总面积"
        width="180">
      </el-table-column>
      <el-table-column
        prop="descripe"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        prop="hname"
        label="所属楼盘"
        width="180">
      </el-table-column>
    </el-table>
      <!-- 分页 -->
			<div class="page-box">
				<el-pagination background
					layout="total, prev, pager, next, sizes, jumper"
					:current-page.sync="pageNum"
					:page-size.sync="pageSize"
					:total="total"
					:page-sizes="[1, 10, 20, 30, 40, 50, 100]"
					@current-change="showAllBuild"
					@size-change="showAllBuild">
				</el-pagination>
			</div>
        <el-button type="primary" @click="add">添加楼栋</el-button>
    </div>
</template>
<script>
export default{
    name:"houseDetail",
    props:['params'],
    data(){
      return{
        builds:[{}],
        hid:this.params.hid,
          dataForm: {},
             pageNum : 0,
        pageSize : 2,
        total : null,
      }
    },computed: {
  //因为数据用到了dataform中的数据，所以写在了computed中
    tableData() {
      return [
        {
          name: "建设单位",
          amount1: this.dataForm.cname,
          amount2: "项目名称",
          amount3: this.dataForm.hname,
            amount4: "土地用途",
          amount5: this.dataForm.lname
        },
        {
          name: "土地权属",
          amount1: this.dataForm.oname,
          amount2: "房屋性质",
          amount3: this.dataForm.rname,
            amount4: "设计用途",
          amount5: this.dataForm.dname
        },
        {
        
          name: "土地号",
          amount1: this.dataForm.lnname,
          amount2: "房屋结构",
          amount3: this.dataForm.bsname,
            amount4: "取得方式",
          amount5: this.dataForm.gname
        },
        {
          
          name: "房屋坐落",
          amount1: this.dataForm.location,
          amount2: "分户图",
          amount3: this.dataForm.housedrawing,
            amount4: "",
          amount5: this.dataForm.housedrawing
        },
    
      ];
    }
  },
    mounted () {
      this.showAllBuild();
      this.showDetail();
    },
    methods: {
      // 自定义列背景色
    columnStyle({ columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3||columnIndex == 5) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
      }else{
        return "background:#ffffff;";
      }
    },
    // 和并列
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 0,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
          showAllBuild(){
            var the = this;
            // console.log("接收到的HID对象"+the.hid.hid)
            console.log("接收到的数据为"+this.params.hid)
            this.sa.ajax("/building/list",{
              'hid':the.params.hid,
               'pageNum' : the.pageNum, 
              'pageSize' : the.pageSize
            },
            function(data){
                the.builds = data.data.data.list;
                the.total = data.data.data.total;
              the.pageNum = data.data.data.pageNum;
              the.pageSize = data.data.data.pageSize;
            })
        },
        showDetail(){
            var the = this;
            this.sa.ajax("/buildManager/detail",{
              'hid':the.params.hid
            },
            function(data){
                the.dataForm = data.data;
            })
        },
         add(){
           var the =this;
           var tab = {id: 'addBuilding', name: '添加楼栋', view: () => import('@/sa-view/WmtbuildManager/addBuilding.vue'), params:{hid:the.params.hid}};
            this.sa_admin.showTab(tab);
      },
      showBuilding(build){
           var tab = {id: 'roomListPage', name: '添加楼栋', view: () => import('@/sa-view/WmtbuildManager/roomListPage.vue'), params:{buildingid:build.buildingid}};
            this.sa_admin.showTab(tab);
      }
    }
}
</script>